<template>
  <div class="app-container">
    <el-form
      ref="elForm"
      :disabled="$route.query.isInfo"
      :model="formData"
      :rules="rules"
      size="medium"
      label-width="120px"
    >
      <h2 style="text-align: center">驾驶员</h2>
      <h4 class="form-header h4">基本信息</h4>
      <el-row :gutter="15">
        <el-col :span="8">
          <el-form-item label="人员" prop="userId">
            <UserDialog
              @change="changeUser"
              v-model="formData.userId"
            ></UserDialog>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="驾驶证编号" prop="driverNo">
            <el-input
              v-model="formData.driverNo"
              placeholder="请输入驾驶证编号"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="初次领证日期" prop="firstGetCertDate">
            <el-date-picker
              v-model="formData.firstGetCertDate"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              :style="{ width: '100%' }"
              placeholder="请选择初次领证日期"
              clearable
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="驾驶证有效期" prop="driverLicense">
            <el-date-picker
              type="daterange"
              v-model="formData.driverLicense"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              :style="{ width: '100%' }"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              range-separator="至"
              clearable
            ></el-date-picker>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="准驾车型" prop="driverTypeValue">
            <el-select
              v-model="formData.driverTypeValue"
              placeholder="请选择准驾车型"
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="dict in dict.type.sys_driver_type"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="账号状态" prop="status">
            <el-radio-group v-model="formData.status">
              <el-radio label="0">正常</el-radio>
              <el-radio label="1">停用</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="备注" prop="remark">
        <el-input
          v-model="formData.remark"
          type="textarea"
          placeholder="请输入多行文本备注"
          :autosize="{ minRows: 4, maxRows: 4 }"
          :style="{ width: '100%' }"
        ></el-input>
      </el-form-item>
      <h4 class="form-header h4">附件信息</h4>
      <el-form-item label="" prop="oss">
        <FileUploadBase
          :isDelete="!$route.query.isInfo"
          v-model="formData.oss"
          :fileType="fileType"
        ></FileUploadBase>
      </el-form-item>

      <el-col :span="24">
        <el-form-item
          label-width="0"
          style="text-align: center; margin-top: 30px"
        >
          <el-button
            v-if="!$route.query.isInfo"
            type="primary"
            @click="submitForm"
            >提交</el-button
          >
          <el-button :disabled="false" @click="resetForm">返回</el-button>
        </el-form-item>
      </el-col>
    </el-form>
  </div>
</template>

<script>
import { driverAdd, updategdriver, driverInfo } from "@/api/car/driver.js";

export default {
  dicts: ["sys_driver_type"],

  components: {},
  props: [],
  data() {
    return {
      fileType: ["doc", "xls", "ppt", "txt", "pdf", "png", "jpg", "jpeg"],
      formData: {
        userId: undefined,
        driverNo: undefined,
        firstGetCertDate: null,
        driverLicense: null,
        driverTypeValue: undefined,
        oss: undefined,
        status: "0",
      },
      rules: {
        oss: [
          {
            required: true,
            message: "附件不能为空",
            trigger: "change",
          },
        ],

        userId: [
          {
            required: true,
            message: "请选择人员",
            trigger: "change",
          },
        ],
        driverNo: [
          {
            required: true,
            message: "请输入驾驶证编号",
            trigger: "blur",
          },
        ],
        firstGetCertDate: [
          {
            required: true,
            message: "请选择初次领证日期",
            trigger: "change",
          },
        ],
        driverLicense: [
          {
            required: true,
            message: "驾驶证有效期不能为空",
            trigger: "change",
          },
        ],
        driverTypeValue: [
          {
            required: true,
            message: "请选择准驾车型",
            trigger: "change",
          },
        ],
      },
    };
  },
  computed: {},
  watch: {},
  created() {
    if (this.$route.query.isEdit || this.$route.query.isInfo) {
      this.getinfo();
    }
  },
  mounted() {},
  methods: {
    changeUser(e) {
      this.formData.nickName = e.nickName;
    },
    getinfo() {
      driverInfo(this.$route.query.id).then((response) => {
        this.formData = response.data;
        this.formData.driverLicense = [
          this.formData.driverLicenseStart,
          this.formData.driverLicenseEnd,
        ];
      });
    },

    submitForm() {
      this.$refs["elForm"].validate((valid) => {
        if (valid) {
          let query = JSON.parse(JSON.stringify(this.formData));
          query.driverLicenseStart = query.driverLicense[0];
          query.driverLicenseEnd = query.driverLicense[1];
          query.driverTypeName = this.dict.type.sys_driver_type.find(
            (i) => i.value === query.driverTypeValue
          ).label;
          if (this.formData.driverId != undefined) {
            updategdriver(query).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.resetForm();
            });
          } else {
            driverAdd(query).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.resetForm();
            });
          }
        }
      });
    },
    resetForm() {
      const obj = { path: "./driver" };
      this.$tab.closeOpenPage(obj);
    },
  },
};
</script>
